<template>
    <view class="uni-shadow attendance-item" @tap.stop="detail">
        <view class="u-flex u-row-between name">
            <text class="font-bold u-line-1" style="max-width:75%" @longtap="longTap(kqItem.name)">{{kqItem.name}}</text>
            <view class="u-flex">
                <text class="u-m-r-10 u-font-24 uni-gery-color">详情</text>
                <u-icon name="arrow-right" size="12" color="#999"></u-icon>
            </view>
        </view>
        <view class="u-m-t-10 u-flex u-flex-wrap">
            <view v-for="(item,index) in kqItem.list" :key="index" 
                class="u-m-t-20 u-flex u-font-26 item">
                <text class="u-m-r-16 uni-dec-color">{{item.title}}</text>
                <text class="u-line-1" style="max-width:45%" @longtap="longTap(item.value)">{{item.value}}</text>
            </view>
        </view>
        <!-- 提示组件 -->
        <u-toast ref="uToast"></u-toast>
    </view>
</template>

<script>
export default {
    name:'attendanceItem',
    props:{
        listItem:{
            type: Object,
            default(){
                return {}
            }
        }
    },

    data(){
        return{
            kqItem:{
                name: '项目名称', // gcmc
                list:[
                    { field:'districtName', title:'属地类型', value:'一师'},
                    { field:'atdStaff', title:'今日考勤数', value:'150'},
                    { field:'staffs', title:'实名总人数', value:'200'},
                    { field:'atdRate', title:'今日考勤率', value:'10%'},
                    { field:'', title:'进场总人数', value:'200'},
                    { field:'', title:'考勤来源', value:'某某某'},
                    // qybm 企业id
                    // id 项目id
                ]
            }
        }
    },

    created() {
        // 处理数据
        this.kqItem.name = this.listItem.gcmc?this.listItem.gcmc:'暂无项目名称'
        this.kqItem.list.map((v,i)=>{
            if( v.field ){
                v.value = this.listItem[v.field]?this.listItem[v.field]:'暂无数据'
            }else{
                v.value = '接口未返回相关字段'
            }
        })
    },

    methods: {
        // 长按事件
        longTap(value){
            this.$refs.uToast.show({
                message: value,
                type: 'default',
                duration: 3000
            })
        },
        // 考勤详情
        detail(){
            uni.navigateTo({ url: '/pages/attendance-bag/team?id='+this.listItem.id })
        }
    },
}
</script>

<style scoped lang="scss">
    .attendance-item{
        .name{
            width: 100%;
        }
        .item{
            width: 50%;
        }
    }
</style>